<template>
   <el-row justify="center" class="min-w-screen min-h-screen bg-blue-300 ">
      <el-col :lg="16" :md="8" class="bg-purple-300 flex items-center justify-center flex-col">
         <div class="text-left">
            <div class="font-bold text-5xl text-light-50 mb-4">
               录音仪Web管理系统
            </div>
            <div class="font-bold mb-1 text-light-50 ">
               每一天都不一样
            </div>
         </div>
      </el-col>
      
      <el-col  :lg="8" :md="8" class="bg-light-50 flex items-center justify-center flex-col">
         <transition>
         <div v-if="el">
         <h2 class="font-bold text-3xl text-gray-700 ml-11">欢迎回来</h2>

         <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
            <span class="h-[1px] w-16 bg-gray-200"></span>
            <span class=" text-gray-700 mb-3">登录密码</span>
            <span class="h-[1px] w-16 bg-gray-200"></span>
         </div>


         <div>
            <el-form ref="loginFormRef"  :model="loginForm" class="w-[200px]" :rules="formRules">
               <el-form-item prop="username" >
                  <el-input v-model.lazy="loginForm.username" placeholder="请输入用户名">

                     <!-- 插入icon -->
                     <template #prefix>
                        <el-icon>
                           <User />
                        </el-icon>
                     </template>

                  </el-input>
               </el-form-item>

               <el-form-item prop="password">
                  <el-input v-model.lazy="loginForm.password" type="password" placeholder="请输入用密码">
                     <template #prefix>
                        <el-icon>
                           <Lock />
                        </el-icon>
                     </template>
                  </el-input>
               </el-form-item>

               <el-form-item>
                  <el-button round color="" class="w-[200px]" type="primary" @click="onSubmit">登录</el-button>
               </el-form-item>
            </el-form>
         </div>
      </div>
      </transition>
      </el-col>
   </el-row>
</template>

<script setup>
    // 表单对象
    import { reactive, ref,onMounted,getCurrentInstance} from "vue";
    import { ElMessage } from 'element-plus'
    import { useRouter } from "vue-router";

    const router = useRouter();
    const loginForm = reactive({
        username: '',
        password: '',
    });

    // 规则对象
    /**
     * 自定义校验函数 - 参数介绍
     * @param { any } rule 当前对应的规则
     * @param { any } value 对应文本框的值
     * @param { any } callback 回调函数，不管是否通过校验，都必须执行
    */
    const validatorUsername = (rule, value, callback) => {
        if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号！"));
        callback();
    };
    const validatorPwd = (rule, value, callback) => {
        // 检验密码强度
        if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
        callback( new Error("密码强度较弱，请输入带有 大写字母、小写字母、数字三种字符组合的密码！"));
    };

    const formRules = {
        username: [
            // required - 是否必填
            // message - 校验不通过的提示信息
            // trigger - 校验的触发方式【blur - 失去焦点触发；change - v-model绑定的值改变触发】
            { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },

            // min - 最小长度
            // max - 最大长度
            { min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
            //{ validator: validatorPwd, triger: 'blur' }
        ],
    };
    
    // TODO 表单整体校验 + 登录
    const { proxy } = getCurrentInstance()
    const loginFormRef = ref(null);
    const onSubmit = () => {
        loginFormRef.value.validate((valid) => {
            if (valid) {

               proxy.$http.post('/login',loginForm)
               .then((rv) => {
                  console.log(rv);
               })

               if (loginForm.username === 'admin' && loginForm.password ==='123456')
               {
                  ElMessage({message: '登录成功',type: 'success'})
                  localStorage.setItem('token','Bearer xxx')
                  router.push('/home')
               } else {
                  ElMessage({message: '用户名密码错误',type: 'error'})
                  localStorage.removeItem('token')
               }
              
            } else {
              ElMessage({message: '用户名密码错误',type: 'error'})
              localStorage.removeItem('token')
            }
        });
    };
    const el = ref(null)

onMounted(() => {
  el.value = true// <div>
})
</script>

<style>
/* 入场起始样式 */
.v-enter-from {
    opacity: 0;
    transform: translateX(30px);
}
/* 入场过渡效果 */
.v-enter-active {
    transition: 2s all ease; 
}
/* 入场结束样式 */
.v-enter-to {
    opacity: 1;
}
/* 出场起始样式 */
.v-leave-from {
    opacity: 1;
}
/* 出场过渡效果 */
.v-leave-active {
    transition: 1s all ease; 
    position: absolute;
}
/* 出场结束样式 */
.v-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
.v-move {
    transition: 2s all ease; 
}
</style>